﻿@{
    Layout = "_LayuiAdminLayout";
}
<script src="~/admin/scripts/jquery-1.7.1.js"></script>
@using Urs.Plugin.Shipping.ByWeight.Models;
@using Urs.Framework.TagHelpers.Admin
@using Urs.Framework;
@using Urs.Core.Infrastructure;
@model ShippingByWeightModel
<style>
    .dcity {
        vertical-align: middle;
        display: block;
        overflow: hidden;
        z-index: 1;
    }

    .ecity {
        position: relative;
        float: left;
        margin-right: 1px;
        padding-right: 8px;
        height: 30px;
        width: 90px;
    }

    .dialog-areas span.gareas {
        white-space: nowrap;
        margin-right: 3px;
        padding: 4px 4px 1px;
        display: inline-block;
        position: relative;
        height: 17px;
        border: 1px solid #fff;
    }

    .dialog-areas .citys span.areas {
        margin-right: 3px;
        padding: 4px 0 1px 4px;
        display: inline-block;
    }

    .dialog-areas input, .dialog-areas button {
        vertical-align: middle;
    }

    .check_num {
        color: #F60;
        font-size: 12px;
        letter-spacing: -1px;
    }

    .trigger {
        width: 8px;
        height: 8px;
        padding: 2px;
        cursor: pointer;
    }

    .dialog-areas label {
        margin: 0 1px;
    }

    .dialog-areas .btns {
        padding: 5px 0 5px 10px;
        margin-left: 330px;
        clear: both;
    }

    .showCityPop {
        z-index: 55556;
    }

        .showCityPop .citys {
            display: block;
            z-index: 55900;
        }

    .dialog-areas .showCityPop .gareas {
        background-color: #FFFEC6;
        border: solid 1px #f7e4a5;
        border-bottom: solid 1px #FFFEC6;
        z-index: 56000;
    }

    .citys {
        background-color: #FFFEC6;
        position: absolute;
        float: right;
        border: solid 1px #f7e4a5;
        z-index: 20000;
        top: 23px;
        left: 0;
        width: 214px;
        display: none;
    }

    .pictures_upload img {
        vertical-align: middle;
        padding: 5px;
    }
</style>


<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">区域</div>
        <div class="layui-card-body">
            <div class="dialog-areas">
                <div class="dcity clearfix">
                    <div class="province-list">
                        @Html.HiddenFor(model => model.Id)
                        @foreach (var item in Model.Scopes)
                        {
                            <div class="ecity">
                                <span class="gareas">
                                    <input type="checkbox" value="310000" class="Province" @(item.Disabled ? "disabled " : string.Empty) @(item.Selected ? "checked" : string.Empty)>
                                    <label>@item.Name</label>
                                    <span class="check_num">@(item.Count != 0 ? "(" + item.Count + ")" : "")</span>
                                    <img class="trigger" src="/images/ico-city.gif" />
                                </span>
                                <div class="citys">
                                    @foreach (var city in item.Cities)
                                    {
                                        <span class="areas">
                                            <input type="checkbox" value="@city.Code" name="City" class="City" @(city.Selected ? "checked" : string.Empty)>
                                            <label>@city.Name</label>
                                        </span>
                                    }
                                    <p style="text-align: right; margin: 0;">
                                        <input type="button" value="关闭" class="close_button">
                                    </p>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">运费</div>
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="">
                <div class="layui-form-item">
                    <nop-label asp-for="ShippingMethodId" />
                    <div class="layui-input-inline">
                        <input asp-for="Id" type="hidden" />
                        <nop-select asp-for="ShippingMethodId" asp-items="Model.AvailableShippingMethods" />
                        <span asp-validation-for="ShippingMethodId"></span>
                    </div>
                </div>
                <div class="layui-row layui-col-space10 layui-form-item">
                    <div class="layui-col-sm6">
                        <nop-label asp-for="First" />
                        <div class="layui-input-block">
                            <nop-editor asp-for="First" />
                            <span asp-validation-for="First"></span>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <nop-label asp-for="FirstPrice" />
                        <div class="layui-input-block">
                            <nop-editor asp-for="FirstPrice" />
                            <span asp-validation-for="FirstPrice"></span>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10 layui-form-item">
                    <div class="layui-col-sm6">
                        <nop-label asp-for="Plus" />
                        <div class="layui-input-block">
                            <nop-editor asp-for="Plus" />
                            <span asp-validation-for="Plus"></span>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <nop-label asp-for="PlusPrice" />
                        <div class="layui-input-block">
                            <nop-editor asp-for="PlusPrice" />
                            <span asp-validation-for="PlusPrice"></span>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="display:none;">
                    <div class="layui-input-block">
                        <button id="layuiadmin-app-form-submit" class="layui-btn" lay-submit lay-filter="btn_save">确认保存</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var citiesArray = [];
    $(function () {
        $('.trigger').click(function () {
            var gareas = $(this).parent().parent();
            if (gareas.hasClass("showCityPop")) {
                gareas.removeClass("showCityPop");
            } else {
                $(".ecity").removeClass("showCityPop");
                gareas.addClass("showCityPop");
            }
        });
        $('.close_button').click(function () {
            $(".ecity").removeClass("showCityPop");
        });
        $('.City').click(function () {
            var value = $(this).attr("checked");
            var checknum = $(this).parent().parent().parent().find(".check_num");
            var numStr = checknum.html();
            var num = 0;
            if (numStr != null && numStr != "") {
                num = numStr.substr(1, numStr.length - 2);
            }
            num = parseInt(num);
            if (value != undefined && value == "checked") {
                citiesArray.push($(this).val());
                num = num + 1;
            } else if (num > 1) {
                var pos = $.inArray($(this).val(), citiesArray);
                citiesArray.splice(pos, 1);
                num = num - 1;
            }
            checknum.html("(" + num + ")");
        });
        $('.Province').click(function () {
            var value = $(this).attr("checked");
            var gareas = $(this).parent().parent();
            var cities = gareas.find('.City');
            cities.each(function () {
                if (value != undefined && value == "checked") {
                    $(this).attr("checked", true);
                    citiesArray.push($(this).val());
                    var count = cities.length;
                    gareas.find(".check_num").html("(" + count + ")");
                } else {
                    var pos = $.inArray($(this).val(), citiesArray);
                    citiesArray.splice(pos, 1);
                    $(this).attr("checked", false);
                    gareas.find(".check_num").html("");
                }
            });
        });
    });
</script>

<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set'], function () {
        var $ = layui.$
            , form = layui.form
            ,active = { }
        form.on('submit(btn_save)', function (obj) {
            var index = layer.load(2, { shade: false });
            var field = obj.field; //获取提交的字段
            field.City = citiesArray;
            //layer.msg(JSON.stringify(obj.field));
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.post('@Url.Action("EditPopup")', field, function (rep) {
                layer.close(index);
                layer.msg("保存成功,即将自动关闭", { time: 2 * 1000 }, function () {
                    var iframe_index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    console.log("当前iframe层的索引:" + iframe_index + "==window.name:" + window.name);
                    parent.layer.close(iframe_index); //再执行关闭
                    window.parent.location.reload();
                });
            });
            return false;
         });
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

